<template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader title="员工信息" hidden-breadcrumb />
        </div>
        <!--    公共筛选查询区域-->
        <Card :bordered="false" dis-hover >
            <!--筛选查询条件区域-->
            <Form ref="form" :model="data" :rules="rules" :label-width="labelWidth" :label-position="labelPosition" >
                <Row :gutter="24" type="flex" justify="end">
                    <Col v-bind="grid" >
                        <FormItem label="所属角色：" :rop="roleGroup" label-for="roleGroup">
                            <Select v-model="data.roleGroup" placeholder="请选择角色" element-id="roleGroup">
                                <Option value="1">部门经理</Option>
                                <Option value="2">人事专员</Option>
                                <Option value="3">招聘主管</Option>
                                <Option value="4">培训主管</Option>
                                <Option value="5">薪酬绩效主管</Option>
                                <Option value="6">系统管理员</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col v-bind="grid">
                        <FormItem label="搜索名称：" prop="name" label-for="name" >
                            <Input v-model="data.name" placeholder="请输入关键字" element-id="name"/>
                        </FormItem>
                    </Col>
                    <Col v-bind="grid" class="ivu-text-right">
                        <FormItem>
                            <Button type="primary" @click="handleSubmit">查询</Button>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <!--新增-->
            <div class="buttonContain" >
                <Button  @click="handleOpenCreate"  type="primary">新增</Button>
            </div>
        </Card>
        <!--数据渲染区域-->
        <div class="i-table-no-border">
            <!--        <Button type="primary" icon="md-add" @click="handleOpenCreate">新增</Button>-->
            <Table
                    ref="table"
                    :columns="columnslist"
                    :data="dataWithPage"
                    :loading="loading"
            >
                <template slot-scope="{ row }" slot="status">
                    <Badge v-if="row.status === 0" status="error" text="禁用"  />
                    <Badge v-if="row.status === 1" status="success" text="启用" />
                </template>
                <template slot-scope="{ row }" slot="tipType">
                    <span v-if="row.txlx === '1'">轻微隐患</span>
                    <span v-if="row.txlx === '2'">一般隐患</span>
                    <span v-if="row.txlx === '3'">严重隐患</span>
                    <span v-if="row.txlx === '4'">火灾报警</span>
                    <span v-if="row.txlx === '5'">灰名单</span>
                    <span v-if="row.txlx === '6'">黑名单</span>
                </template>
                <template slot-scope="{ row , index}" slot="dxmbTywysbm">
                    <a @click="showDetail(row.dxmbTywysbm)">详情</a>
                    <Divider type="vertical" />
                    <a @click="handleEdit(row.index)" :style="{'color':'#4AABF2'}">编辑</a>
                    <Divider type="vertical" />
                    <a @click="handleDelete(row.index)" :style="{'color':'red'}">删除</a>
                </template>
            </Table>
            <div class="ivu-mt ivu-text-center">
                <Page :total="limitData.length" show-elevator :current.sync="current"  show-total />
            </div>

        </div>
    </div>

</template>

<script>
	import { mapState } from 'vuex';
	import datalist1 from './data'
	export default {
		data(){
			return{
				grid: {
					xl: 8,
					lg: 8,
					md: 12,
					sm: 24,
					xs: 24
				},
				data: {
					name: '',
					status1: '',
					count: null,
					date: '',
					status2: '',
					status3: ''
				},
				//验证规则
				rules: {
				},
				dayak:[],
				count: 10,
				current: 1,
				list: [],
				size: 10,
				datalist: [],
				columnslist: [
					{
						title: '序号',
						key: 'id',
                        minWidth: 80

					},
					{
						title: '用户名称',
						key: 'userName',
                        minWidth: 80

					},
					{
						title: '电话',
						key: 'phoneNumber',
						minWidth: 120
					},
					{
						title: '邮箱',
						key: 'email',
						minWidth: 120
					},{
						title: '所属部门',
						key: 'dept',
						minWidth: 80
					},{
						title: '所属角色',
						key: 'roleGroup',
						minWidth: 80
					},{
						title: '入职日期',
						key: 'createTime',
						minWidth: 80
					},

					{
						title: '操作',
						slot: 'dxmbTywysbm',
						align: 'center',
						minWidth: 140
					}
				],
				loading: false,
			}
		},
		computed: {
			limitData () {
				let data = [...this.list];
				return data;
			},
			...mapState('admin/layout', [
				'isMobile'
			]),
			labelWidth () {
				return this.isMobile ? undefined : 100;
			},
			labelPosition () {
				return this.isMobile ? 'top' : 'right';
			},
			// 因为要动态计算总页数，所以还需要一个计算属性来返回最终给 Table 的 data
			dataWithPage () {
				const data = this.limitData;
				const start = this.current * this.size - this.size;
				const end = start + this.size;
				return [...data].slice(start, end);
			},
		},
        created() {
			this.getData();
        },
		methods: {
			//调用数据
			getData(){

				this.current = 1;
				this.loading = true;
				setTimeout( () => {
					this.list = datalist1;
					this.loading = false;
				},1000)
                //调接口
			/*	messageTemplate.findPage()
					.then(res => {
						// 返回数据
						this.dayak = res.data;
						this.count = res.count;
						this.loading = false;
					})
					.catch(err => {
						// 异常情况
					})*/
			},
			handleSubmit () {
				this.$emit('on-submit', this.data);
			},
			handleReset () {
				this.$refs.form.resetFields();
				this.$emit('on-reset');
			},
			/*新增*/
			handleOpenCreate(){
				this.$router.push('/employee/comuser/comuser-add')
			},
			// 新增数据
			handleCreate () {
				this.$refs.create.validate((valid) => {
					if (valid) {
						if (this.updateIndex < 0) {
							// 新建
							const mockData = this.mockOneData();
							mockData.desc = this.createData.desc;
							mockData.date = new Date();
							this.list.splice(0, 0, mockData);
							this.$Message.success('创建成功');
						} else {
							// 修改
							const updateItemName = this.dataWithPage[this.updateIndex].name;
							const updateItemIndex = this.list.findIndex(item => item.name === updateItemName);
							this.list[updateItemIndex].desc = this.createData.desc;
							this.$Message.success('修改成功');
						}

						this.showCreate = false;
						this.creating = false;
						this.$nextTick(() => {
							this.creating = true;
						});
					} else {
						this.creating = false;
						this.$nextTick(() => {
							this.creating = true;
						});
					}
				});
			},
			// 详情
			showDetail (dxmbTywysbm) {
				const item = dxmbTywysbm;
				this.$router.push({
					path: '/employee/comuser/comuser-detail',
					name:'comuser-detail',
					params:{
						item
					}
				});
			} ,
			//编辑
			handleEdit(dxmbTywysbm){
				const item = dxmbTywysbm;
				console.log(item);
				// this.$router.push('/evaluationDecision/fireInfo-details')
				this.$router.push({
					path: '/employee/comuser/comuser-add',
					name:'comuser-add',
					params:{
						item,
						index: 'edit'
					}
				});

			},
            //删除
			handleDelete (index) {
				console.log(index);
				/*    this.updateIndex = index;
                    const item = this.dataWithPage[index];
                    this.createData.desc = item.desc;
                    this.showCreate = true;*/
				this.$Modal.confirm({
					title: '删除',
					content: '确定删除吗？',
					onOk: () => {
						this.data.splice(index, 1);
						this.$Message.success('删除成功');
					}
				});
			}
		},
	}
</script>


<style lang="less" scoped>
    .buttonContain{
        >button{
            width: 120px;
            height: 40px;
            font-size: 16px;
        }
    }

</style>
